<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body style="padding: 20px;">

<div class="layui-card">
    <div class="layui-card-header"><h3>服务器信息</h3></div>
    <div class="layui-card-body">
        <div id="server"></div>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-header"><h3>CPU</h3></div>
    <div class="layui-card-body">
        <div id="cpu"></div>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-header"><h3>系统内存</h3></div>
    <div class="layui-card-body">
        <div id="memory"></div>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-header"><h3>JVM 信息</h3></div>
    <div class="layui-card-body">
        <div id="jvm"></div>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-header"><h3>磁盘信息</h3></div>
    <div class="layui-card-body">
        <table class="layui-hide" id="disk-table"></table>
    </div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['jquery', 'descriptions', 'util', 'table'], function() {
        let $ = layui.jquery;
        let desc = layui.descriptions;
        let util = layui.util;
        let table = layui.table;
        let url = layui.url();

        $.get('/monitor/serverInfo', function(result) {

            desc.render({
                elem: '#server',
                fieldNum: 2,
                data: result.server,
                cols: [
                    { field: 'manufacturer', title: '制造商' },
                    { field: 'hostName', title: '主机名称', newline: true },
                    { field: 'hostAddress', title: '主机 IP' },
                    { field: 'operationSystem', title: '操作系统' },
                    { field: 'operationSystemArch', title: '系统架构' },
                ]
            });

            desc.render({
                elem: '#cpu',
                fieldNum: 2,
                data: result.cpu,
                cols: [
                    { field: 'cpuNum', title: 'CPU核心数', longtext: false, newline: false },
                    { field: 'total', title: 'CPU总的使用率', hide: true},
                    { field: 'sys', title: 'CPU系统使用率', templet: function (d) {
                        return d.sys + '%';
                    }},
                    { field: 'user', title: 'CPU用户使用率', templet: function (d) {
                        return d.user + '%';
                    }},
                    { field: 'wait', title: 'CPU当前等待率', hide: true },
                    { field: 'free', title: 'CPU当前空闲率', templet: function (d) {
                        return d.free + '%';
                    }},
                    { field: 'cpuModel', title: 'CPU型号信息', longtext: true, templet: function (d) {
                        return d.cpuModel.replaceAll('\n','<br/>');
                    }},
                ]
            });

            desc.render({
                elem: '#memory',
                fieldNum: 2,
                data: result.memory,
                cols: [
                    { field: 'total', title: '总内存', templet: function (d) {
                        return $.vtl.byteConvert(d.total);
                    }},
                    { field: 'unavailable', title: '已用内存', templet: function (d) {
                        return $.vtl.byteConvert(d.unavailable);
                    }},
                    { field: 'available', title: '剩余内存', templet: function (d) {
                        return $.vtl.byteConvert(d.available);
                    }},
                    { field: 'total', title: '使用率', templet: function (d) {
                        return (Math.round(d.unavailable / d.total * 10000) / 100.00 + '%');
                    }},
                ]
            });

            desc.render({
                elem: '#jvm',
                fieldNum: 2,
                data: result.jvm,
                cols: [
                    { field: 'jvmName', title: 'JAVA 名称' },
                    { field: 'jvmVersion', title: 'JAVA 版本' },
                    { field: 'jvmVendor', title: 'JVM 厂商' },
                    { field: 'javaHome', title: 'jre安装路径' },
                    { field: 'projectHome', title: '项目路径' },
                    { field: 'currentProcessIdentifier', title: 'JVM运行的PID' },
                    { field: 'startTime', title: 'JVM启动时间' },
                    { field: 'runTimeSeconds', title: 'JVM运行时长', templet: function (d) {
                        return $.vtl.secondsFormat(d.runTimeSeconds);
                    }},
                    { field: 'startArgs', title: '运行参数', newline: true },
                    { field: 'maxMemory', title: 'JVM最大内存', newline: true },
                    { field: 'usableMemory', title: 'JVM最大可用内存' },
                    { field: 'totalMemory', title: 'JVM已分配内存' },
                    { field: 'freeMemory', title: 'JVM已分配中剩余内存' },
                ]
            });

            table.render({
                elem: '#disk-table',
                cols: [[
                  {field: 'diskName', title: '磁盘名称'},
                  {field: 'mountName', title: '卷名称'},
                  {field: 'diskFormat', title: '磁盘格式'},
                  {field: 'total', title: '磁盘总容量'},
                  {field: 'used', title: '磁盘已使用容量'},
                  {field: 'free', title: '磁盘剩余容量'},
                  {field: 'usageRate', title: '磁盘使用率'}
                ]],
                data: result.disk.dataList,
              });
        });
    })
</script>
</body>
</html>
